<template>
  <div class="dialog">
    <el-dialog width="70%" :title="title" :visible="true" :close-on-click-modal="false" :before-close="close">
      <el-form v-if="type === 1" ref="form" :model="form" label-width="110px">
        <el-form-item label="行业：" prop="roleName">
          <el-select v-model="form.roleName" placeholder="请选择" clearable>
            <el-option :label="111" :value="111" />
          </el-select>
        </el-form-item>
        <el-form-item label="类目：" prop="roleName">
          <el-select v-model="form.roleName" placeholder="请选择" clearable>
            <el-option :label="111" :value="111" />
          </el-select>
        </el-form-item>
      </el-form>
      <div v-if="type === 2">
        <el-tabs v-model="activeIndex2">
          <el-tab-pane label="旅游景区" name="1">
            <ProductList v-if="activeIndex2=== '1'" :site-ids="siteIds" />
          </el-tab-pane>
          <el-tab-pane label="运动健身" name="2">
            <ProductList v-if="activeIndex2=== '2'" :site-ids="siteIds" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="type === 3">
        <TicketList />
      </div>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ProductList from './ProductList.vue'
import TicketList from './TicketList.vue'

export default {
  name: 'AddContent',
  components: {
    ProductList,
    TicketList
  },
  props: {
    type: {
      type: Number,
      default: 1
    },
    siteIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      activeIndex2: '1',
      form: {}
    }
  },

  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ]),
    title() {
      if (this.type === 1) {
        return '选择行业/类目'
      } else if (this.type === 2) {
        return '选择商品'
      } else if (this.type === 3) {
        return '选择套票'
      } else if (this.type === 4) {
        return '选择油品'
      } else if (this.type === 5) {
        return '选择洗车设备'
      } else if (this.type === 6) {
        return '选择课程'
      } else {
        return ''
      }
    }
  },

  created() {
  },

  methods: {

    // 取消
    close() {
      this.$emit('close')
    },

    // 确认
    confirm() {
      this.$emit('confirm')
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body{
  padding: 10px 20px;
}
</style>
